<template>
	<view>
		<view class="zxsTab">
			<view class="tabCon" style="padding-top: 30rpx;">
				<!-- <scroll-view scroll-y="true" :scroll-into-view="intoindex" scroll-with-animation> -->
					<view id="tabCon_0">
						<!-- 介绍 -->
						<view class="intro">
							<view class="zxjy">
								<view class="tit">咨询寄语</view>
								<view class="jyCon">{{zxsInfo.wish}}</view>
							</view>
							<view class="detInfo">
								<view class="detInfoItem">
									<view class="infoTit">个人简介:</view>
									<view class="infoCon">
										<view 
											v-for="(item,index) in toArrayFuns((zxsInfo.profile || ''),'<br/>')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">教育程度:</view>
									<view class="infoCon">{{zxsInfo.education}}</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">擅长语言:</view>
									<view class="infoCon clearfix">
										<view class="infoTag"
											v-for="(item,index) in toArrayFuns((zxsInfo.language || ''),',')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">荣获证书:</view>
									<view class="infoCon"
										v-for="(item,index) in toArrayFuns((zxsInfo.zsName || ''),',')"
										:key="index"
									>{{item}}</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">擅长领域:</view>
									<view class="infoCon"
										v-for="(item,index) in scRange"
										:key="index"
									>
										<view class="scRangeTit">[{{item.parentLyName}}]</view>
										<view class="tagView clearfix">
											<view class="infoTag"
												v-for="(innerItem,innerIndex) in item.subLyList"
												:key="innerIndex"
											>{{innerItem.lyName}}</view>
										</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">擅长领域介绍:</view>
									<view class="infoCon">
										<view
											v-for="(item,index) in toArrayFuns((zxsInfo.scRangeDetail || ''),'<br/>')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">擅长服务:</view>
									<view class="infoCon clearfix">
										<view class="infoTag"
											v-for="(item,index) in toArrayFuns((zxsInfo.scService || ''),',')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">擅长人群:</view>
									<view class="infoCon clearfix">
										<view class="infoTag"
											v-for="(item,index) in toArrayFuns((zxsInfo.scCrowd || ''),',')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">咨询流派:</view>
									<view class="infoCon clearfix">
										<view class="infoTag"
											v-for="(item,index) in toArrayFuns((zxsInfo.zxLp || ''),',')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">咨询风格:</view>
									<view class="infoCon clearfix">
										<view class="infoTag"
											v-for="(item,index) in toArrayFuns((zxsInfo.zxFg || ''),',')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem">
									<view class="infoTit">咨询风格介绍:</view>
									<view class="infoCon">
										<view
											v-for="(item,index) in toArrayFuns((zxsInfo.zxFgDetail || ''),'<br/>')"
											:key="index"
										>{{item}}</view>
									</view>
								</view>
								<view class="detInfoItem" v-if="zxsInfo.utList != ''">
									<view class="infoTit" style="margin-bottom: 10rpx;">培训经历:</view> 
									<timeAxis :dataArray="zxsInfo.utList"></timeAxis>
									
								</view>
								
							</view>
						</view>
					</view>
					<!-- 相册 -->
					<block v-if="zxsInfo.upList !='' && zxsInfo.upList != undefined">
						<view class="commentTit hasFlex">
							<view class="titL hasFlex">
								<view>相册</view>
								<!-- ({{zxsInfo.upList.length && zxsInfo.upList != ''}}张) -->
								<view class="commNum"></view>
							</view>
						</view>
						<view class="abumList">
							<scroll-view class="scrollView" scroll-x>
								<view class="picList"
									v-for="(item,index) in zxsInfo.upList"
									:key="index"
								>
									<image class="samePar" :src="getCloudFilePath(item.zlImg)" mode="aspectFill" @tap="previewImage(index)"></image>
								</view>
							</scroll-view>
						</view>
					</block>
					<!-- 评价 -->
					<view id="tabCon_1">
						<block v-if="zxsInfo.pjList !='' && zxsInfo.pjList != undefined">
							<view class="commentTit hasFlex">
								<view class="titL hasFlex">
									<view>评价</view>
									<view class="commNum" v-if="zxsInfo.pjScore > 0 ">({{zxsInfo.pjScore}}分)</view>
								</view>
								<view class="more" v-if="zxsInfo.pjTotalNum > 0" @tap="goMorePj">
									<text>全部评价({{zxsInfo.pjTotalNum}}条)</text>
									<text class="iconfont icon-gengduo"></text>
								</view>
							</view>
							<view class="commentList">
									<view class="listItem"
										v-for="(item,index) in zxsInfo.pjList"
										:key="index"
									>
									<view class="listItemTop hasFlex">
										<view class="itemImg hasFlex">
											<view class="headImg"> 
												<image class="samePar" v-if="item.usePortrait == ''" src="../../../../static/images/defHead.png"></image>
												<image class="samePar" v-else :src="getCloudFilePath(item.usePortrait)"></image>
											</view>
											<view class="usename">{{item.realName}}</view>
										</view>
										<view class="topRight"> 
											<htz-rate v-model="item.pjScore" :size="24" :gutter="5" :readonly="true" :type="1"></htz-rate>
										</view>
									</view>
									<view class="itemCon">{{item.pjContent}}</view>
									<view class="botTime hasFlex">
										<view class="itemTime">{{item.pjTime}}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 问题解答 -->
					<block v-if="zxsInfo.maList !=''">
						<view id="tabCon_2">
							<view class="commentTit hasFlex">
								<view class="titL hasFlex">
									<view>问题解答</view>
								</view> 
								<view class="more" @tap="viewMoreAnsQue">
									<text>查看更多</text>
									<text class="iconfont icon-gengduo"></text>
								</view>
							</view> 
							<view class="queAnsWrap"> 
								<view class="queAnsItem"
									v-for="(item,index) in zxsInfo.maList" 
									:key="index" 
								> 
									<view class="queAnsTit">问:{{item.askTitle}} </view> 
									<view class="queAnsCon"><view class="multiEllip clamp3">解答:<jyf-parser :html="item.ackContent" :selectable="true"></jyf-parser></view></view> 
								</view> 
							</view> 
						</view>
					</block>
			</view>
		</view>
		<!-- 线下机构 -->
		<view class="offLineOgz" v-if="zxsInfo.uoList!= '' && zxsInfo.uoList != undefined">
			<view class="commentTit hasFlex">
				<view class="titL hasFlex">
					<view>所属机构</view>
				</view>
			</view>
			<view class="ogzItem">
				<view class="ogzName spaceBet">
					<text>{{zxsInfo.uoList[0].ogzName}}</text>
					<!-- <view class="goNavigation" @tap="goCurrLocation(zxsInfo.uoList[0].ogzName)">
						<text class="iconfont icon-daohang"></text>
						<text>{{distance(zxsInfo.uoList[0].distance)}}km</text>
					</view> -->
				</view>
				<view class="ogzAdd"><text class="iconfont icon-weizhi"></text><text>{{zxsInfo.uoList[0].address}}</text></view>
				<view class="ogzTel">
					<view><text class="iconfont icon-dianhua1"></text><text>{{zxsInfo.uoList[0].lxTel}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timeAxis from '@/components/time_axis/time_axis.vue'
	export default {
		components:{
			timeAxis
		},
		props:{
			zxsInfo:Object,
			scRange:Array
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			},
			distance(){
				return function(distance){
					return (distance/1000).toFixed(2)
				}
			}
		},
		data(){
			return{
				tabNav:['介绍','评价','解答'],
				tabIndex:0,
				pjScore:3,
				intoindex:''
			}
		},
		methods:{
			goMorePj(){
				this.$emit('goMorePj')
			},
			viewMoreAnsQue(){
				this.$emit('viewMoreAnsQue')
			},
			goCurrLocation(ogzName){
				this.$emit('goCurrLocation',ogzName)
			},
			previewImage(index){
				this.$emit('previewImage',index)
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/zxsPj.scss';
	.scrollView{
		white-space: nowrap;
		.picList{
			width: 260rpx;
			height: 190rpx;
			display: inline-block;
			margin-right: 20rpx;
			.samePar{
				border-radius: 15rpx;
			}
		}
	}
	.botTime{
		justify-content: flex-end;
	}
	.scRangeTit{
		margin-bottom: 10rpx;
	}
	.noDataTxt{
		text-align:center;
		padding: 50rpx 0;
		font-size: $font-size26;
		color: $pss-text-colora;
	}
	.infoTag{
		height: 46rpx;
		line-height: 46rpx;
		font-size: $font-size26;
		border-radius: 8rpx; 
		padding: 0 10rpx;
		margin-right: 15rpx;
		float: left;
		margin-bottom: 15rpx;
		background: #fff1d8;
		color:#ffa70f ;
	}
	.offLineOgz{
		padding: 0 30rpx 30rpx;
		background: #fff;
		margin-top: 20rpx;
		.ogzItem{
			border-radius: 10rpx;
			box-shadow: 0 0 15rpx rgba(0,0,0,.1);
			padding: 20rpx 30rpx 30rpx;
			.ogzName{
				height: 60rpx;
				align-items: center;
				font-size: $font-size30;
				font-weight: bold;
				color: $pss-text-color3;
				.goNavigation{
					height: 100%;
					line-height: 60rpx;
					font-size: $font-size26;
					color: #fda915;
					padding-left: 60rpx;
					.icon-daohang{
						font-size: 24rpx;
					}
				}
			}
			.ogzAdd,
			.ogzTel{
				font-size: $font-size28; 
				color: $pss-text-colora;
				.icon-weizhi,
				.icon-dianhua1{
					margin-right: 10rpx;
					font-size: $font-size28; 
				}
			}
			.ogzAdd{
				margin-bottom: 10rpx;
			}
		}
	}
	.queAnsItem{
		margin-bottom: 20rpx;
		border:1rpx solid #ffa510;
		border-radius: 14rpx;
		.queAnsTit{
			height: 70rpx;
			line-height: 70rpx;
			background: #fda915;
			border-radius: 14rpx 14rpx 0 0;
			box-shadow: 0 0 30rpx #fff inset;
			font-size: $font-size30;
			color: #fff;
			padding: 0 20rpx;
			font-weight: bold;
		}
		.queAnsCon{
			padding: 20rpx;
			font-size: $font-size30;
			color: $pss-text-color8;
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	
	/* 介绍 */
	.detInfo{
		padding: 20rpx 30rpx 10rpx;
		background: $pss-bg-primary;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.detInfoItem{
			font-size: $font-size30;
			color: $pss-text-color3;
			margin-bottom: 15rpx;
			.infoCon{
				width: 95%;
				color:  $pss-text-color8;
				margin:15rpx auto 0;
				/* font-size: $font-size30; */
			}
		}
	}
	.zxjy{
		.tit{
			width: 160rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #fda915;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 0 20rpx #fff inset;
			font-size: $font-size30;
			color: #fff;
		}
		.jyCon{
			min-height: 60rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #fff1d8;
			box-shadow: 0 0 40rpx #fff inset;
			border-radius: 0 20rpx 20rpx 20rpx;
			color:#ffa70f ;
			font-size: $font-size30;
		}
	}
	.tabCon{
		padding: 0 30rpx 20rpx;
		background: #fff;
	}
	.tabNav{
		padding: 0 30rpx;
		height: 90rpx;
		font-size: $font-size28;
		color: $pss-text-colora;
		display: flex;
		background: #fff;
		.tabItem{
			height: 100%;
			line-height: 90rpx;
			margin-right: 15rpx;
			padding-right: 50rpx;
			&.active{
				color: $pss-color-primary_1;
				font-weight: bold;
			}
		}
	}
</style>